<template>
	<view>
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balance">任务详情</text>
				<!-- 右边自定义图片 -->
				<navigator url="task-rules" class="renwu_css">任务规则</navigator>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;">
		</view>
		<view class="headBox">
			<text class="taskStatus">{{taskStatus}}</text>
			<text class="taskStatusb">{{taskStatusb}}</text>
		</view>
		<view class="personBox">
			<image class="photo" :src="photo"></image>
			<image class="shimmin" :src="shimmin"></image>
			<text class="taskname">{{taskname}}</text>
			<text class="money">￥{{money}}<text class="num">/ {{num}}个</text> </text>
			<text class="labela">{{labela}}</text>
			<text class="labelb">{{labelb}}</text>
		</view>
		<view class="taskinProgress_box">
			<text class="progressfont">进行中<text class="progressNum">{{progressNuma}}</text>个</text>
			<text class="progressfont">已通过<text class="progressNum">{{progressNumb}}</text>个</text>
			<text class="progressfont">未通过<text class="progressNum">{{progressNumc}}</text>个</text>
			<text class="progressfont">剩余<text class="progressNum">{{progressNumd}}</text>个</text>
		</view>
		<view class="operatingInstructions_box">
			<text class="operatingInstructions">操作说明:<br />进行中包含以下状态：1.领取待提交；2.待商家审核。</text>
		</view>
		<view class="linkBox">
			<text class="linkAdress">链接地址</text>
			<view class="openLink">打开链接</view>
			<view class="copyLink">复制链接</view>
		</view>
		<view class="task_content_box">
			<view class="task_content_box_top">任务步骤</view>
			<view class="task_content_box_lr">
				<view class="task_content_box_left">
					<image src="/static/task/shuxian.png" mode="widthFix" style="width: 40rpx;height: 962rpx;"></image>
				</view>
				<view class="task_content_box_right">
					<view class="task_content_box_right_list">
						<view class="task_content_box_right_list_top">
							步骤一（图文说明）

						</view>
						<view class="task_content_box_right_list_txt">
							6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
						</view>
						<image src="../../../static/dating/public.png" mode="" class="task_content_box_right_list_pic"></image>
					</view>
					<view class="task_content_box_right_list">
						<view class="task_content_box_right_list_top">
							步骤二（图文说明）

						</view>
						<view class="task_content_box_right_list_txt">
							6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
						</view>
						<image src="../../../static/dating/public.png" mode="" class="task_content_box_right_list_pic"></image>
					</view>
					<view class="task_content_box_right_list">
						<view class="task_content_box_right_list_top">
							步骤三（提交截图）
						</view>
						<view class="task_content_box_right_list_txt">
							6月15日下午17时30时,首次载人交会对接任务的航天员与记者见面会在酒泉驻地问天阁会见厅举行。神舟九号航天员乘组三名成员正式亮相,并回答中外记者提问。 三位航天员工。
						</view>
						<view class="" style="display: flex;justify-content: space-between;padding: 0 50rpx;">

							<image src="/static/dating/public.png" mode="" class="pic_task_content_box_right_list"></image>
							<image src="/static/task/undown.png" mode="" class="pic_task_content_box_right_list"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="taskInfoboxa">
			<text class="taskFont">文字验证</text>
			<text class="taskphone">{{taskphone}}</text>
		</view>
		<view class="taskInfobox">
			<text class="taskFont">结束时间</text>
			<text class="taskphone">{{taskendMonth}}</text>
		</view>
		<view class="taskInfobox">
			<text class="taskFont">提交限时</text>
			<text class="taskphone">{{taskTime}}小时</text>
		</view>
		<view class="taskInfobox">
			<text class="taskFont">审核周期</text>
			<text class="taskphone">{{cycle}}小时</text>
		</view>
		<view class="taskInfobox">
			<text class="taskFont">支付凭证</text>
			<text class="taskphone">{{taskPz}}凭证</text>
		</view>
		<view @click="goaudit" class="taskInfoboxb">
			<text class="taskFont">审核记录</text>
			<text class="taskAuditrecord">{{taskAuditrecord}}条</text>
			<image class="rightjt" src="../../../static/user2/rightjt.png"></image>
		</view>
		<view @click="godosing" class="taskInfobox">
			<text class="taskFont">加量记录</text>
			<text class="taskAuditrecord">{{taskAuditrecordb}}条</text>
			<image class="rightjt" src="../../../static/user2/rightjt.png"></image>
		</view>
		<view class="orderInfobox">
			<text class="orderinfo">订单信息</text>
			<text class="taskNumber">· 任务编号 {{taskNumber}}</text>
			<text class="creationTime">· 创建时间 {{creationTime}} {{creationTimea}}</text>
			<text class="onlineTime">· 上线时间 {{onlineTime}} {{onlineTimea}}</text>
			<text class="endTime">· 结束时间 {{endTime}} {{endTimea}}</text>
		</view>
		<view class="viewAudit">
			查看审核
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskStatus: '任务已结束',
				taskStatusb: '任务已结束，您可以加量再次开启任务',
				photo: '../../../static/user/photo.png',
				shimmin: '../../../static/user2/shiminga.png',
				taskname: '任务名称',
				money: '6.80',
				num: '20',
				labela: '下载注册',
				labelb: '王者荣耀',
				progressNuma: '0',
				progressNumb: '18',
				progressNumc: '2',
				progressNumd: '0',
				taskphone:'19155628183',
				taskendMonth:'2020-04-20',
				taskTime:'2',
				cycle:'24',
				taskPz:'100',
				taskAuditrecord:'3',
				taskAuditrecordb:'2',
				taskNumber:'101815454',
				creationTime:'2020-4-19',
				creationTimea:'10:30',
				onlineTime:'2020-4-19',
				onlineTimea:'10:30',
				endTime:'2020-4-19',
				endTimea:'10:30'
			};
		},
		methods:{
			back(){
				uni.navigateBack({
					
				})
			},
			goaudit(){
				uni.navigateTo({
					url:'./auditRecord'
				})
			},
			godosing(){
				uni.navigateTo({
					url:'./dosingRecord'
				})
			}
		}
	}
</script>

<style lang="scss">
	.renwu_css {
		width: 142rpx;
		position: absolute;
		right: 35rpx;
		top: 25rpx;
		font-size: 32rpx;
		background: linear-gradient(45deg, rgba(212, 32, 238, 1) 0%, rgba(115, 34, 216, 1) 100%);
		-webkit-background-clip: text;
		color: transparent;
	}

	.headBox {
		width: 680rpx;
		height: 130rpx;
		background: rgba(255, 255, 255, 1);
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		left: 35rpx;
	}

	.taskStatus {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		top: 25rpx;
	}

	.taskStatusb {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		top: 75rpx;
	}

	.personBox {
		width: 680rpx;
		height: 160rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		margin-left: 35rpx;
	}

	.photo {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 20rpx;
	}

	.shimmin {
		width: 105rpx;
		height: 30rpx;
		position: absolute;
		top: 30rpx;
		left: 124rpx;
	}

	.taskname {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 20rpx;
		left: 250rpx;
	}

	.money {
		font-size: 28rpx;
		color: #FF3B30;
		position: absolute;
		right: 0rpx;
		bottom: 49rpx;
	}

	.num {
		font-size: 28rpx;
		color: #333333;
		margin-left: 10rpx;
	}

	.labela {
		width: 78rpx;
		height: 28rpx;
		background: rgba(115, 34, 216, 0.5);
		border-radius: 4rpx;
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		bottom: 49rpx;
		left: 124rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.labelb {
		width: 78rpx;
		height: 28rpx;
		background: rgba(115, 34, 216, 0.5);
		border-radius: 4rpx;
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		bottom: 49rpx;
		left: 212rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.taskinProgress_box {
		width: 690rpx;
		height: 90rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #E5E5E5;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.progressfont {
		font-size: 24rpx;
		color: #8E8E8E;
	}

	.progressNum {
		font-size: 24rpx;
		color: #FF3B30;
	}

	.operatingInstructions_box {
		width: 750rpx;
		height: 146rpx;
		background: rgba(255, 255, 255, 1);
		position: relative;
	}

	.operatingInstructions {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		top: 20rpx;
		left: 35rpx;
		line-height: 50rpx;
	}

	.linkBox {
		width: 750rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}

	.linkAdress {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 35rpx;
	}

	.openLink {
		width: 130rpx;
		height: 46rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 184rpx;
	}

	.copyLink {
		width: 130rpx;
		height: 46rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 34rpx;
	}

	.task_content_box {
		width: 680rpx;
		height: 1450rpx;
		// border: 1rpx solid red;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		padding-left: 20rpx;
		padding-right: 36rpx;
		box-sizing: border-box;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		top: 17rpx;
		left: 35rpx;

		.task_content_box_top {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 20rpx;
		}

		.task_content_box_lr {
			display: flex;

			.task_content_box_right {
				margin-left: 13rpx;
			}

		}
	}

	.task_content_box_right_list {
		height: 420rpx;
		margin-bottom: 24rpx;

		.task_content_box_right_list_top {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}

		.task_content_box_right_list_txt {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			height: 150rpx;
			margin-top: 15rpx;
		}

		.task_content_box_right_list_pic {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			margin-top: 21rpx;
			margin-left: 145rpx;
		}
	}

	.pic_task_content_box_right_list {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		margin-top: 21rpx;
	}
	.taskInfoboxa{
		width:680rpx;
		height:100rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		// border: 1rpx solid red;
		position: relative;
		top: 20rpx;
		left: 35rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	.taskInfoboxb{
		width:680rpx;
		height:100rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		// border: 1rpx solid red;
		position: relative;
		left: 35rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}
	.taskInfobox{
		width:680rpx;
		height:100rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		// border: 1rpx solid red;
		position: relative;
		left: 35rpx;
		display: flex;
		align-items: center;
	}
	.taskFont{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		position: absolute;
		left: 21rpx;
	}
	.taskphone{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(142,142,142,1);
		position: absolute;
		right: 22rpx;
		}
		.taskAuditrecord{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(142,142,142,1);
			position: absolute;
			right: 45rpx;
			}
			.rightjt{
				width:14rpx;
				height:22rpx;
				position: absolute;
				right: 20rpx;
				}
			.orderInfobox{
				width:680rpx;
				background:rgba(255,255,255,1);
				border-radius:20rpx;
				margin-top: 20rpx;
				margin-left: 35rpx;
				position: relative;
				}
				.orderinfo{
					display: block;
					width: 660rpx;
					height: 80rpx;
					font-size:30rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(51,51,51,1);
					display: flex;
					align-items: center;
					padding-left: 20rpx;
				}
				.taskNumber{
					display: block;
					width: 610rpx;
					height: 40rpx;
					margin-top: 5rpx;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(142,142,142,1);
					padding-left: 70rpx;
				}
				.creationTime{
					display: block;
					width: 610rpx;
					height: 40rpx;
					margin-top: 8rpx;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(142,142,142,1);
					padding-left: 70rpx;
				}
				.onlineTime{
					display: block;
					width: 610rpx;
					height: 40rpx;
					margin-top: 8rpx;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(142,142,142,1);
					padding-left: 70rpx;
				}
				.endTime{
					display: block;
					width: 610rpx;
					height: 40rpx;
					margin-top: 8rpx;
					font-size:32rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(142,142,142,1);
					padding-left: 70rpx;
				}
				.viewAudit{
					width:680rpx;
					height:90rpx;
					background:rgba(115,34,216,1);
					box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
					border-radius:20rpx;
                    font-size:38rpx;
                    font-family:PingFang SC;
                    font-weight:bold;
                    color:rgba(255,255,255,1);			
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 30rpx;
					margin-left: 35rpx;
					margin-bottom: 30rpx;
				}
</style>
